<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:80px' }"
    :wrapper-col="{ style: 'calc(100% - 80px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <!-- 港前 -->
    <a-form-item label="问题类型" name="questionType" :rules="[{ required: true, message: '请选择问题类型!' }]" v-if="type === 1">
      <a-select v-model:value="formState.questionType" placeholder="请选择">
        <a-select-option v-for="item in dataDict['PRE_PORT_SCOPE']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <!-- 港后 -->
    <a-form-item label="问题类型" name="questionType" :rules="[{ required: true, message: '请选择问题类型!' }]" v-if="type === 2">
      <a-select v-model:value="formState.questionType" placeholder="请选择">
        <a-select-option v-for="item in dataDict['AFTER_PORT_SCOPE']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { updateWorkOrderQuestionApi } from "@/api/waybillManagement/workOrder";
import CommonHook from "@/hook/commonHook";
import FormHook from "@/hook/formHook";
import { message } from "ant-design-vue";
import { reactive, ref, toRefs, watch } from "vue";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: BusinessWorkOrder.ListRows[];
    type: number; //1港前 2港后
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const formDataRef = ref<any>(null);
const loading = ref<boolean>(false);
const formState = reactive<{ questionType: string }>({
  questionType: ""
});
const { resetFields } = FormHook({ formState });
const { dataDict } = CommonHook();
const onFinish = () => {
  const { questionType } = formState;
  const params: Parameters<typeof updateWorkOrderQuestionApi>[0] = {
    idList: passData.value.map((t: any) => t.id),
    questionType
  };

  return updateWorkOrderQuestionApi(params)
    .then((res: any) => {
      const { code } = res;
      if (code === 200) {
        message.success("操作成功!");
        emit("submit");
      }
    })
    .finally(() => (loading.value = false));
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

const resetHandle = () => {
  resetFields();
  formDataRef.value.clearValidate();
  emit("update:visible", false);
};

watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
</script>
<style lang="stylus" scoped>
:deep(.ant-picker){
    width: 100%;
}
</style>
